<template>
    <div :id="idTime" :style="{ width: '100%', height: height + 'px' }"></div>
</template>

<script lang="ts" setup>

/*
面积图又叫区域图。 它是在折线图的基础之上形成的, 它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充，这样一个填充区域我们叫做面积，颜色的填充可以更好的突出趋势信息。

## API

### v2-mini-area

| 参数 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `[repaint]` | 数据再次变更时是否重绘 | `boolean` | `true` |
| `[delay]` | 延迟渲染，单位：毫秒 | `number` | `0` |
| `[color]` | 图表颜色 | `string` | `rgba(24, 144, 255, 0.2)` |
| `[borderColor]` | 图表边颜色 | `string` | `#1890FF` |
| `[height]` | 图表高度 | `number` | `56` |
| `[line]` | 是否显示描边 | `boolean` | `false` |
| `[animate]` | 是否显示动画 | `boolean` | `true` |
| `[padding]` | 图表内部间距 | `array` | `[8, 8, 8, 8]` |
| `[xAxis]` | [x 轴配置](https://echarts.apache.org/zh/option.html#xAxis) | `object` | - |
| `[yAxis]` | [y 轴配置](https://echarts.apache.org/zh/option.html#yAxis) | `object` | - |
| `[yTooltipSuffix]` | y 轴Tooltip后缀，一般指定单位 | `string` | - |
| `[tooltipType]` | Tooltip显示类型 | `'mini','default'` | `'default'` |
| `[data]` | 数据 | `v2MiniAreaData[]` | - |
| `[theme]` | 定制图表主题 | `string | LooseObject` | - |
| `(clickItem)` | 点击项回调 | `EventEmitter<v2MiniAreaClickItem>` | - |

### v2MiniAreaData

| 参数 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `[x]` | x轴 | `any` | - |
| `[y]` | y轴 | `any` | - |
| `[color]` | 轴颜色 | `string` | - |

*/

import * as echarts from 'echarts'
import { defineProps, defineEmits, onMounted, onUnmounted, useAttrs, watch, ref } from 'vue'

const Emits = defineEmits(['clickItem'])

const props = defineProps({
    repaint: {
        type: Boolean,
        default: true
    },
    delay: {
        type: Number,
        default: 0
    },
    color: {
        type: String,
        default: 'rgba(24, 144, 255, 0.2)'
    },
    borderColor: {
        type: String,
        default: '#1890FF'
    },
    height: {
        type: Number,
        default: 44
    },
    line: {
        type: Boolean,
        default: false
    },
    animate: {
        type: Boolean,
        default: true
    },
    padding: {
        type: Array,
        default: [8, 8, 8, 8]
    },
    data: {
        type: Object,
        default: {}
    },

    yTooltipSuffix: {
        type: String,
    },
    tooltipType: {
        type: String,
        default: 'default'
    },
})

const myChart = ref()

//生成 图表 id
let idTime = 'ec_' + String(new Date().getTime())
//防止生成的id重叠
let idcreat = true
if (!!document.getElementById(idTime)) {
    idTime = 'ec_' + String(new Date().getTime() + 1)
    idcreat = true
} else {
    idcreat = true
}

onMounted(() => {
    let setIn = setInterval(() => {
        if (idcreat) {
            myChart.value = v2MiniArea()
            clearInterval(setIn)
        }
    })
})

//销毁组件取消监听
onUnmounted(() => {
    removeEventListener("resize", v2Areathrottle, false)
})


if (props.repaint) {
    watch(() => [props.data], (data, predata) => {

        //判断数据是否相同
        if (!(JSON.stringify(data) == JSON.stringify(predata))) {

            reload(data)
        }
    })
}


//防抖函数
const v2Areathrottle: any = function (fn: any, wait: any) {
    let timer: any = null;
    return function () {
        let context = {};
        let args = arguments;
        if (!timer) {
            timer = setTimeout(function () {
                fn.apply(context, args);
                timer = null;
            }, wait)
        }
    }
}


//刷新数据
const reload = (data: any) => {

    const option = myChart.value.getOption();
    option.xAxis.data = data[0].x
    option.series[0].data = data[0].y;
    // option.
    myChart.value.setOption(option);
    //v2MiniArea()
}

//渲染
const v2MiniArea = () => {
    let parentEle = document.getElementById(idTime) as HTMLElement
    let myChart = echarts.init(parentEle);

    const option = {
        //图例
        legend: false,
        grid: {
            left: props.padding[0],
            top: props.padding[1],
            right: props.padding[2],
            bottom: props.padding[3],
            show: false,
            height: props.height,
        },
        xAxis: {
            type: 'category',
            show: false,
            boundaryGap: false,
            data: props.data.x
        },
        animation: props.animate,
        animationDelay: props.delay,
        yAxis: {
            show: false,
            type: 'value',
            axisTick: {
                alignWithLabel: true,
                length: 1
            }
        },

        tooltip: {
            //是否显示提示框组件
            show: true,
            trigger: 'axis',

            formatter: (params: any, ticket: any, callback: any) => {
                params = params[0]
                if (props.tooltipType == 'mini') {
                    return `<span>${params.data}</span>`
                } else {
                    let div = `<div style="padding: 1px 2px;text-indent: 18px; position: relative;">
                <i style="position: absolute; border-radius: 50%; width: 8px; height: 8px; background: ${params.color}; left: 2px; top:8px; ">
                </i>${params.name}：${params.data} ${props.yTooltipSuffix}</div>`
                    return div
                }
            },
        },
        series: [
            {
                data: props.data.y,
                type: 'line',
                name: 'mimi-area',
                smooth: true,
                areaStyle: {},
                itemStyle: {
                    color: props.color
                },
                symbol: "circle",
                showSymbol: false,
                //视觉引导线
                lineStyle: {
                    width: props.line ? 2 : '0',
                    color: props.borderColor
                },
            }
        ]
    };
    myChart.setOption(option);
    //屏幕自适应
    window.addEventListener("resize", v2Areathrottle(() => { myChart.resize() }, 200))
    myChart.on('click', function (params) {
        Emits('clickItem', params)
    })

    return myChart
}




</script>
<script lang="ts">
export default {
    name: 'v2-mini-area'
}
</script>
<style lang="less" scoped>
</style>